<template>
  <div class="common-layout">
    <el-container>
      <el-header>vue3后台管理系统</el-header>
      <el-container>
        <el-aside width="200px">
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        router
      >
        <el-sub-menu v-for="item in navlist" :key="item.id" :index="'/'+item.path">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{item.authName}}</span>
          </template>
            <el-menu-item v-for="ele in item.children" :key="ele.id" :index="'/'+ele.path">{{ele.authName}}</el-menu-item>
        </el-sub-menu>
      </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
    
</template>

<script setup>
import {
  ref,
  reactive,
  toRefs,
  computed,
  watch,
  getCurrentInstance,
  onMounted,
} from "vue";
// import  menu from "@/components/menu"
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
const store =useStore()
const isCollapse =ref(false)
const navlist =store.state.menuList
console.log(navlist);


</script>

<style lang='scss' scoped>
.test{
  margin: 0;
  padding: 0;
}
.el-menu-vertical-demo{
  height: calc(100% - 20px);
}
.show {
  width: 100%;
  height: 10px;
  text-align: center;
  line-height: 10px;
  margin: 5px 0;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  height: 80px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 30px;
  .el-button--info{
    height: 40px;
    margin-top: 10px;
  }
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  height: calc(100vh - 80px);
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  height: calc(100vh - 80px);
}
</style>

